<template>
<h1>用户详细信息注册页面</h1>

    <table>
        <tr>
            <td>用户真实姓名</td>
            <td>
                <input type="text" v-model="UserInfo.U_Name" >
            </td>
        </tr>

        <tr>
            <td>用户手机号</td>
            <td>
                <input type="text" v-model="UserInfo.U_Phone" >
            </td>
        </tr>

        <tr>
            <td>身份证号</td>
            <td>
                <input type="text" v-model="UserInfo.U_IdCard" @change="GetDate" >
            </td>
        </tr>

        <tr>
            <td>性别</td>
            <td>
                <input type="radio" name="gender" v-model="UserInfo.U_Sex" value="false">男
                <input type="radio" name="gender" v-model="UserInfo.U_Sex" value="true">女
            </td>
        </tr>

        <tr>
            <td>出生日期</td>
            <td>
                <input type="date" v-model="UserInfo.U_Date" >
            </td>
        </tr>

        <tr>
            <td>用户年收益</td>
            <td>
                <input type="text" v-model="UserInfo.U_Money" >
            </td>
        </tr>

        <tr>
            <td>用户类型</td>
            <td>
                <select v-model="UserInfo.UT_Id" >
                    <option value="">请选择</option>
                    <option v-for=" item in Type" :key="item.UT_Id" :value="item.UT_Id">
                        {{ item.UT_Name }}
                    </option>
                </select>
            </td>
        </tr>

        <tr>
            <td colspan="2">
                <input type="button" value="用户详细信息注册" @click="AddUserInfo" />
            </td>
        </tr>

    </table>

</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue';
import { useRouter,useRoute } from 'vue-router';
import axios from 'axios';

// 用户类型的响应式数据
const Type = ref([{
    UT_Id:'',
    UT_Name:'',
}])
// 用户详细信息的响应式数据
const UserInfo = ref({
    U_Id:"",
    U_Name:'',
    U_Phone:'',
    U_Date:'',
    U_Sex:'',
    U_IdCard:'',
    U_Money:'',
    UT_Id:'',
})

const router = useRouter();


const route = useRoute();
//确定用户编号是否带过来了
console.log(route.params.U_id);
//生命周期钩子
onMounted (()=>{
    UserType();
})
//显示用户类型
const UserType = ()=>{
    axios({
        method:'get',
        url:'http://localhost:63517/api/User/UserType',
    })
    .then(res=>{
        console.log(res.data);
        Type.value = res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}

const GetDate = ()=>{
    UserInfo.value.U_Date = 
    +UserInfo.value.U_IdCard.substring(6,10)+'-'
    +UserInfo.value.U_IdCard.substring(10,12)+'-'
    +UserInfo.value.U_IdCard.substring(12,14);
}


//用户详细信息注册
const AddUserInfo = ()=>{

    if(UserInfo.value.U_Name==''){
        alert('真实姓名不能为空');
        return;
    }

    if(UserInfo.value.U_Phone==''){
        alert('联系方式不能为空');
        return;
    }

    var reg_2 = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
    if(!reg_2.test(UserInfo.value.U_Phone)){
        alert('联系方式格式不正确');
        return;
    }

    if(UserInfo.value.U_Date==''){
        alert('出生日期不能为空');
        return;
    }

    if(UserInfo.value.U_IdCard==''){
        alert('身份证号不能为空');
        return;
    }

    var reg_1 =  /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
    if(!reg_1.test(UserInfo.value.U_IdCard)){
        alert('身份证号格式不正确');
        return;
    }

    if(UserInfo.value.U_Money==''){
        alert('年收益不能为空');
        return;
    }

    if( Number(UserInfo.value.U_Money)<0 ){
        alert('年收益必须大于0');
        return;
    }

    if( Number(UserInfo.value.U_Money)<=0 || Number(UserInfo.value.U_Money)>100000000 ){
        alert('年收益必须大于0且小于1亿元');
        return;
    }
    
    //alert('asdklsajdklasjdas');

    axios({
        method:'post',
        url:'http://localhost:63517/api/User/AddUserInfo',
        data:{
            U_Id:route.params.U_id,
            U_Name:UserInfo.value.U_Name,
            U_Phone:UserInfo.value.U_Phone,
            U_Date:UserInfo.value.U_Date,
            U_Sex:UserInfo.value.U_Sex,
            U_IdCard:UserInfo.value.U_IdCard,
            U_Money:UserInfo.value.U_Money,
            UT_Id:UserInfo.value.UT_Id,
        }
    })
    .then(res=>{
        console.log(res.data);
        if(res.data>0){
            alert('用户详细信息注册成功'); 
            router.push('/Login');
        }
        else{
            alert('用户详细信息注册失败');
        }
    })
    .catch(err=>{
        console.log(err);
    })
}

</script>
